var theme = {

    mzos: $("#main_param").attr("data-param-mzos"),

    init: function() {
        this.initTitle();
        this.loadPage();
        this.bindEvent();
    },

    initTitle: function() {
        mz_util.selectMenu("theme");
        $(".content_nav").css({ "margin-top": 0, "margin-bottom": "10px" });
    },

    loadPage: function() {
        var self = this;
        var mzos = self.mzos;
        self.loadAds(mzos);
        self.loadCats(mzos);
        self.loadRanks(mzos);
        self.loadDownRanks(mzos);
        self.loadSpecials(mzos);
    },

    loadAds: function(mzos) {
        var action = "/themes/public/index/ads",
            parameters = { 'mzos': mzos };
        util.request({
            action: action,
            params: parameters,
            mzos: parameters.mzos || util.getMzos(),
            addMzosHeader: true,
            cb: function(result) {
                if (!result || result.code != 200) {
                    return;
                }
                var data = result.value;
                $.each(data, function(idx, val) {
                    $("#bannerImgList").append('<li><img src="' + val.img + '" data-contentUrl="' + val.contentUrl + '"></li>');
                    var selected = (idx == 0 ? "inner" : "outter");
                    $("#bannerIdxList").append("<li><span class='" + selected + " banner_idx'></span></li>");
                });
                $('#bannerIdxList').show();
                photoesController.initImgSlider();
            }
        });
    },

    loadCats: function(mzos) {
        var action = "/themes/public/index/cats",
            parameters = { 'mzos': mzos };
        util.request({
            action: action,
            params: parameters,
            mzos: parameters.mzos || util.getMzos(),
            addMzosHeader: true,
            cb: function(result) {
                if (!result || result.code != 200) {
                    return;
                }
                var data = result.value;
                $.each(data, function(idx, val) {
                    $("#categoryList").append('<li data-param="' + val.id + '"><img src="' + val.icon + '"><a title="' + val.name + '" class="ellipsis">' + val.name + '</a></li>');
                });
            }
        });
    },

    loadRanks: function(mzos) {
        var action = "/themes/public/index/ranks",
            parameters = { 'mzos': mzos };
        util.request({
            action: action,
            params: parameters,
            mzos: parameters.mzos || util.getMzos(),
            addMzosHeader: true,
            cb: function(result) {
                if (!result || result.code != 200) {
                    return;
                }
                var data = result.value;
                var tmp = '';
                $.each(data.recommends, function(idx, val) {
                    var theme_right = ((idx + 1) % 4 == 0 ? "theme_right" : "");
                    tmp += '<div class="theme_one downloading ' + theme_right + '" data-param="' + val.packageName +
                        '" data-appId="' + val.id + '" data-catId="' + val.categoryId + '"> <img src="' + val.thumbnail +
                        '"> <a ><span class="ellipsis" title="' + val.name + '">' + val.name +
                        '</span></a> <div class="startDiv"> <div class="star_bg left" data-num="' + val.star +
                        '"></div> <a class="price right" appId="' + val.id + '" appPrice="' + val.price +
                        '">' + val.price + '</a> </div> </div>';
                });
                $("#theme_recmd_feed").after(tmp);

                tmp = '';
                $.each(data.allNewList, function(idx, val) {
                    var theme_right = ((idx + 1) % 4 == 0 ? "theme_right" : "");
                    tmp += '<div class="theme_one downloading ' + theme_right + '" data-param="' + val.packageName +
                        '" data-appId="' + val.id + '" data-catId="' + val.categoryId + '"> <img src="' + val.thumbnail +
                        '"> <a ><span class="ellipsis" title="' + val.name + '">' + val.name +
                        '</span></a> <div class="startDiv"> <div class="star_bg left" data-num="' + val.star +
                        '"></div> <a class="price right" appId="' + val.id + '" appPrice="' + val.price +
                        '">' + val.price + '</a> </div> </div>';
                });
                $("#theme_recmd_new").after(tmp);

                tmp = '';
                $.each(data.allHotList, function(idx, val) {
                    var theme_right = ((idx + 1) % 4 == 0 ? "theme_right" : "");
                    tmp += '<div class="theme_one downloading ' + theme_right + '" data-param="' + val.packageName +
                        '" data-appId="' + val.id + '" data-catId="' + val.categoryId + '"> <img src="' + val.thumbnail +
                        '"> <a ><span class="ellipsis" title="' + val.name + '">' + val.name +
                        '</span></a> <div class="startDiv"> <div class="star_bg left" data-num="' + val.star +
                        '"></div> <a class="price right" appId="' + val.id + '" appPrice="' + val.price +
                        '">' + val.price + '</a> </div> </div>';
                });
                $("#theme_recmd_hot").after(tmp);

                mz_util.formatPrice();
            }
        });
    },

    loadDownRanks: function(mzos) {
        var action = "/themes/public/index/down-ranks",
            parameters = { 'mzos': mzos };
        util.request({
            action: action,
            params: parameters,
            mzos: parameters.mzos || util.getMzos(),
            addMzosHeader: true,
            cb: function(result) {
                if (!result || result.code != 200) {
                    return;
                }
                var data = result.value;
                var downFreeList = data.downFreeList;
                var downPaidList = data.downPaidList;
                $.each(downFreeList, function(idx, val) {
                    var selected = (idx < 3 ? 'selected' : '');
                    $('#freeList').append('<li data-param="' + val.packageName + '"><span class="origin ' + selected + '">' + (idx + 1) + '</span><div><a><span class="ellipsis" title="' + val.name + '">' + val.name + '</span></a><span class="star_bg" data-num="' + val.star + '"></span></div><img src="' + val.thumbnail + '" class="none"></li>');
                });
                $.each(downPaidList, function(idx, val) {
                    var selected = (idx < 3 ? 'selected' : '');
                    $('#paidList').append('<li data-param="' + val.packageName + '"><span class="origin ' + selected + '">' + (idx + 1) + '</span><div><a><span class="ellipsis" title="' + val.name + '">' + val.name + '</span></a><span class="star_bg" data-num="' + val.star + '"></span></div><img src="' + val.thumbnail + '" class="none"></li>');
                });
            }
        });
    },

    loadSpecials: function(mzos) {
        var action = "/themes/public/index/specials",
            parameters = { 'mzos': mzos };
        util.request({
            action: action,
            params: parameters,
            mzos: parameters.mzos || util.getMzos(),
            addMzosHeader: true,
            cb: function(result) {
                if (!result || result.code != 200) {
                    return;
                }
                var data = result.value;
                if (data.specialSize > 3) {
                    $('#theme_special .title_18').after('<a class="more subject">更多</a>');
                }
                var list = data.specialList;
                $.each(list, function(idx, val) {
                    $('#theme_special_list').append('<a><img src="' + val.logo + '" data-param="' + val.id + '" /></a>');
                });
            }
        });
    },

    bindEvent: function() {
        var self = this;
        $("#freeList,#paidList").on("mouseenter", "li", function() {
            $(this).parent().find("img").addClass("none");
            $(this).find("img").removeClass("none");
        }).on("click", "li", function() {
            location = "/themes/public/detail?package_name=" + $(this).attr("data-param") + "&mzos=" + self.mzos;
        });
        $(".more.subject").live('click', function() {
            location = "/themes/public/special/list" + "?mzos=" + self.mzos;
        });
        $(".more.new").click(function() {
            location = "/themes/public/category/5/all/new/index/0/20" + "?mzos=" + self.mzos;
        });
        $(".more.paid").click(function() {
            location = "/themes/public/category/5/all/feed/index/0/20" + "?mzos=" + self.mzos;
        });

        $(".app_recommend.subject").on("click", "img", function() {
            location = "/themes/public/special/" + $(this).attr("data-param") + "/list" + "?mzos=" + self.mzos;
        });

        $("#freeLink").click(function() {
            $("#freeList").show().find("li:first").trigger("mouseenter");
            $("#paidList").hide();
            $(this).addClass("current").siblings().removeClass("current");
        });
        $("#freeList").show().find("li:first").trigger("mouseenter");
        $("#paidLink").click(function() {
            $("#freeList").hide();
            $("#paidList").show().find("li:first").trigger("mouseenter");
            $(this).addClass("current").siblings().removeClass("current");
        });
        $(".app_recommend").on("click", ".theme_one", function() {
            location = "/themes/public/detail?package_name=" + $(this).attr("data-param") + "&mzos=" + self.mzos;
        });

        $("#categoryList").on("click", "li", function() {
            location = "/themes/public/category/" + $(this).attr("data-param") + "/all/new/index/0/20" + "?mzos=" + self.mzos;
        });
        $("#bannerImgList").on("click", "img", function() {
            location = $(this).attr("data-contentUrl");
        });

        $(".enter.dev").click(function() {
            window.open("http://designer.meizu.com");
        });
        $(".enter.mz_mail").click(function() {
            $("body").append("<iframe src='mailto:theme@meizu.com' class='none'></iframe>");
        });
    }
};

$(function() {
    theme.init();
});